* {

    box-sizing: border-box;

  }

  

  body {

    margin: 0px;

    font-family: 'segoe ui';

  }

  

  .nav1 {

    height: 50px;

    width: 100%;

    background-color: #1177ca;

    position: relative;

  }

  

  .nav1 > .nav-header {

    display: inline;

  }

  

  .nav1 > .nav-header > .nav-title {

    display: inline-block;

    font-size: 22px;

    color: #fff;

    font-weight: 550;

    font-family: Arial, Helvetica, sans-serif;

    padding: 10px 10px 10px 10px;

  }

  

  .nav1 > .nav-btn {

    display: none;

  }

  

  .nav1 > .nav-links {

    display: inline;

    float: right;

    font-size: 18px;

  }

  .nav1 > .nav-links > ul li a{

    display: block;

    padding: 0 8px;

    color: #fff;

    line-height: 40px;

    font-size: 18px;

    text-decoration: none;



  }

  .nav1 > .nav-links > ul{

    padding: 0;

    margin-top: 5px;

    list-style: none;

    position: relative;

    

  }

  .nav1 > .nav-links > ul li{

    display: inline-block;

    background-color: #1177ca;

    

    

  }

  .nav1 > .nav-links > ul li:hover{

      background-color: #0b65af;

      border-radius: 5px;

  }

  

  .nav1 > #nav-check {

    display: none;

  }



 .nav1 .nav-links ul a.icon{

 margin-left: 80px;

 margin-right: 10px;

 }



 .nav1 .nav-links ul a i{

    background-color: #fff;

    border-radius: 50px;

    padding: 7px;

    margin-left: 5px;

 }



  

  @media (max-width:750px) {

    .nav1 > .nav-btn {

      display: inline-block;

      position: absolute;

      right: 0px;

      top: 0px;

    }

    .nav1 > .nav-btn > label {

      display: inline-block;

      width: 50px;

      height: 50px;

      padding: 13px;

    }

    .nav1 > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {

      background-color: rgba(0, 0, 0, 0.3);

    }

    .nav1 > .nav-btn > label > span {

      display: block;

      width: 25px;

      height: 10px;

      border-top: 2px solid #eee;

    }

    .nav1 > .nav-links {

      position: absolute;

      display: block;

      width: 100%;

      background-color: #333;

      height: 0px;

      transition: all 0.3s ease-in;

      overflow-y: hidden;

      top: 50px;

      left: 0px;

    }

    .nav1 > .nav-links > ul li a {

      display: block;

      width: 100%;

    }



    /*   */





    

      .nav1 > .nav-links > ul li{

        display: block;

        margin-bottom: 20px;

        padding: 0;

        background-color: #333;

         

      }

      .nav1 > .nav-links > ul li a{

          margin-left: 40%;

      }

      .nav1 .nav-links ul a.icon{

        margin-left: 33%;

      }



    /*   */

    .nav1 > #nav-check:not(:checked) ~ .nav-links {

      height: 0px;

    }

    .nav1 > #nav-check:checked ~ .nav-links {

      height: calc(100vh - 50px);

      overflow-y: auto;

    }

  }